<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no">
    <title>京享礼金</title>

    <script>
        ; (function (win, lib) {
            var doc = win.document
            var docEl = doc.documentElement
            var metaEl = doc.querySelector('meta[name="viewport"]')
            var flexibleEl = doc.querySelector('meta[name="flexible"]')
            var dpr = 0
            var scale = 0
            var tid
            var flexible = lib.flexible || (lib.flexible = {})

            if (metaEl) {
                // console.warn('将根据已有的meta标签来设置缩放比例')
                var match = metaEl.getAttribute('content').match(/initial\-scale=([\d\.]+)/)
                if (match) {
                    scale = parseFloat(match[1])
                    dpr = parseInt(1 / scale)
                }
            } else if (flexibleEl) {
                var content = flexibleEl.getAttribute('content')
                if (content) {
                    var initialDpr = content.match(/initial\-dpr=([\d\.]+)/)
                    var maximumDpr = content.match(/maximum\-dpr=([\d\.]+)/)
                    if (initialDpr) {
                        dpr = parseFloat(initialDpr[1])
                        scale = parseFloat((1 / dpr).toFixed(2))
                    }
                    if (maximumDpr) {
                        dpr = parseFloat(maximumDpr[1])
                        scale = parseFloat((1 / dpr).toFixed(2))
                    }
                }
            }

            if (!dpr && !scale) {
                var isAndroid = win.navigator.appVersion.match(/android/gi)
                var isIPhone = win.navigator.appVersion.match(/iphone/gi)
                var devicePixelRatio = win.devicePixelRatio
                if (isIPhone) {
                    // iOS下，对于2和3的屏，用2倍的方案，其余的用1倍方案
                    if (devicePixelRatio >= 3 && (!dpr || dpr >= 3)) {
                        dpr = 3
                    } else if (devicePixelRatio >= 2 && (!dpr || dpr >= 2)) {
                        dpr = 2
                    } else {
                        dpr = 1
                    }
                } else {
                    // 其他设备下，仍旧使用1倍的方案
                    dpr = 1
                }
                scale = 1 / dpr
            }

            docEl.setAttribute('data-dpr', dpr)
            if (!metaEl) {
                metaEl = doc.createElement('meta')
                metaEl.setAttribute('name', 'viewport')
                metaEl.setAttribute(
                    'content',
                    'initial-scale=' +
                    scale +
                    ', maximum-scale=' +
                    scale +
                    ', minimum-scale=' +
                    scale +
                    ', user-scalable=no'
                )
                if (docEl.firstElementChild) {
                    docEl.firstElementChild.appendChild(metaEl)
                } else {
                    var wrap = doc.createElement('div')
                    wrap.appendChild(metaEl)
                    doc.write(wrap.innerHTML)
                }
            }

            function refreshRem() {
                var width = docEl.getBoundingClientRect().width
                if (width / dpr > 540) {
                    width = 540 * dpr
                }
                var rem = width * 0.133334
                docEl.style.fontSize = rem + 'px'
                flexible.rem = win.rem = rem
            }

            win.addEventListener(
                'resize',
                function () {
                    clearTimeout(tid)
                    tid = setTimeout(refreshRem, 300)
                },
                false
            )
            win.addEventListener(
                'pageshow',
                function (e) {
                    if (e.persisted) {
                        clearTimeout(tid)
                        tid = setTimeout(refreshRem, 300)
                    }
                },
                false
            )

            if (doc.readyState === 'compvare') {
                doc.body.style.fontSize = 12 * dpr + 'px'
            } else {
                doc.addEventListener(
                    'DOMContentLoaded',
                    function (e) {
                        doc.body.style.fontSize = 12 * dpr + 'px'
                    },
                    false
                )
            }

            refreshRem()

            flexible.dpr = win.dpr = dpr
            flexible.refreshRem = refreshRem
            flexible.rem2px = function (d) {
                var val = parseFloat(d) * this.rem
                if (typeof d === 'string' && d.match(/rem$/)) {
                    val += 'px'
                }
                return val
            }
            flexible.px2rem = function (d) {
                var val = parseFloat(d) / this.rem
                if (typeof d === 'string' && d.match(/px$/)) {
                    val += 'rem'
                }
                return val
            }
        })(window, window['lib'] || (window['lib'] = {}))
    </script>
    <link rel="stylesheet" href="https://cdn.staticfile.org/layer/2.3/skin/layer.css">
    <style>*{-webkit-tap-highlight-color:transparent}body,html{background:#bd1d14;padding:0;margin:0}[v-cloak]{display:none}.free-container{min-height:100vh;max-width:7.5rem;background:#bd1d14;padding-bottom:1.54rem;margin:0 auto;box-sizing:border-box}.free-banner{width:7.5rem;height:auto;display:block;margin-bottom:.23rem}.free-explain{width:7.02rem;height:auto;display:block;margin:0 auto .4rem}.free-navbar .free-navbar-class{width:7.02rem;margin:0 auto .2rem;border:1px solid #edb66c;border-radius:.44rem;box-sizing:border-box;overflow:hidden}.free-navbar .free-navbar-class,.free-navbar .free-navbar-class span{height:.88rem;display:-webkit-flex;display:flex;-webkit-align-items:center;align-items:center}.free-navbar .free-navbar-class span{width:50%;font-size:.36rem;font-weight:700;color:#ffeb90;background:#bd1d14;-webkit-justify-content:center;justify-content:center;cursor:pointer;-webkit-user-select:none;user-select:none}.free-navbar .free-navbar-class span.active{color:#bd1d14;background:linear-gradient(90deg,#fdcc76,#f9e58a)}.free-navbar .free-navbar-second{-webkit-justify-content:space-between;justify-content:space-between;padding:0 .26rem;box-sizing:border-box}.free-navbar .free-navbar-second,.free-navbar .free-navbar-second span{display:-webkit-flex;display:flex;-webkit-align-items:center;align-items:center}.free-navbar .free-navbar-second span{width:1.5rem;height:.6rem;font-size:.3rem;font-weight:700;color:#ffeb90;background:rgba(249,227,136,.2);-webkit-justify-content:center;justify-content:center;border-radius:.3rem;cursor:pointer;-webkit-user-select:none;user-select:none}.free-navbar .free-navbar-second span.active{color:#bd1d14;background:#f9e388}.free-navbar .free-navbar-tips{font-size:.24rem;font-weight:400;color:#ebaf51;text-align:center;margin:.24rem 0 .28rem;-webkit-user-select:none;user-select:none}.free-lists{padding:0 .24rem;box-sizing:border-box}.free-lists .free-item{width:7.02rem;background:#fff;display:-webkit-flex;display:flex;padding:.2rem;margin-bottom:.2rem;border-radius:.2rem;box-sizing:border-box;cursor:pointer;-webkit-user-select:none;user-select:none}.free-lists .free-item>img{width:2.3rem;height:2.3rem;border-radius:.1rem}.free-lists .free-item .detail{position:relative;width:calc(100% - 2.3rem);padding-left:.2rem;box-sizing:border-box}.free-lists .free-item .detail .title{font-size:.3rem;font-weight:500;color:#000;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;margin:0}.free-lists .free-item .detail .label{width:1.54rem;font-size:.28rem;margin-top:.2rem;border-radius:.1rem}.free-lists .free-item .detail .label,.free-lists .free-item .detail .share{height:.56rem;color:#f23015;background:#ffefed;display:-webkit-flex;display:flex;-webkit-justify-content:center;justify-content:center;-webkit-align-items:center;align-items:center}.free-lists .free-item .detail .share{position:absolute;top:.58rem;right:-.2rem;width:1.03rem;font-size:.26rem;font-weight:500;padding-left:.1rem;border-radius:.28rem 0 0 .28rem;cursor:pointer;box-sizing:border-box;-webkit-user-select:none;user-select:none;z-index:1}.free-lists .free-item .detail .footer{display:-webkit-flex;display:flex;-webkit-justify-content:space-between;justify-content:space-between;-webkit-align-items:center;align-items:center;margin-top:.43rem}.free-lists .free-item .detail .footer .price span{font-size:.36rem;font-weight:700;color:#f23015}.free-lists .free-item .detail .footer .price em{font-style:normal;font-size:.24rem;font-weight:500;color:#b9b9b9;text-decoration:line-through}.free-lists .free-item .detail .footer .operation{width:1.87rem;height:.72rem;font-size:.28rem;font-weight:700;color:#bd1d14;background:linear-gradient(0deg,#ffcd62,#fde989);display:-webkit-flex;display:flex;-webkit-justify-content:center;justify-content:center;-webkit-align-items:center;align-items:center;border-radius:.36rem}.free-lists .free-item-loading{text-align:center;margin:.24rem 0}.free-lists .free-item-loading span{font-size:.24rem;color:#fff;letter-spacing:.01rem}.free-loading{display:-webkit-flex;display:flex;-webkit-justify-content:center;justify-content:center;-webkit-align-items:center;align-items:center;-webkit-flex-direction:column;flex-direction:column;padding-top:.6rem}.free-loading>p{font-size:.3rem;color:#fff;letter-spacing:.01rem;margin:.2rem 0 0}.free-loading .la-line-scale{width:1.6rem;height:1.28rem;display:block;font-size:0;color:#fff}.free-loading .la-line-scale>div{display:inline-block;float:none;background-color:currentColor;border:0 solid;width:.16rem;height:1.28rem;margin:0 .08rem;border-radius:0;-webkit-animation:line-scale 1.2s ease infinite;-moz-animation:line-scale 1.2s infinite ease;-o-animation:line-scale 1.2s infinite ease;animation:line-scale 1.2s ease infinite}.free-loading .la-line-scale>div:first-child{-webkit-animation-delay:-1.2s;-moz-animation-delay:-1.2s;-o-animation-delay:-1.2s;animation-delay:-1.2s}.free-loading .la-line-scale>div:nth-child(2){-webkit-animation-delay:-1.1s;-moz-animation-delay:-1.1s;-o-animation-delay:-1.1s;animation-delay:-1.1s}.free-loading .la-line-scale>div:nth-child(3){-webkit-animation-delay:-1s;-moz-animation-delay:-1s;-o-animation-delay:-1s;animation-delay:-1s}.free-loading .la-line-scale>div:nth-child(4){-webkit-animation-delay:-.9s;-moz-animation-delay:-.9s;-o-animation-delay:-.9s;animation-delay:-.9s}.free-loading .la-line-scale>div:nth-child(5){-webkit-animation-delay:-.8s;-moz-animation-delay:-.8s;-o-animation-delay:-.8s;animation-delay:-.8s}@-webkit-keyframes line-scale{0%,40%,to{-webkit-transform:scaleY(.4);transform:scaleY(.4)}20%{-webkit-transform:scaleY(1);transform:scaleY(1)}}@-moz-keyframes line-scale{0%,40%,to{-webkit-transform:scaleY(.4);-moz-transform:scaleY(.4);transform:scaleY(.4)}20%{-webkit-transform:scaleY(1);-moz-transform:scaleY(1);transform:scaleY(1)}}@-o-keyframes line-scale{0%,40%,to{-webkit-transform:scaleY(.4);-o-transform:scaleY(.4);transform:scaleY(.4)}20%{-webkit-transform:scaleY(1);-o-transform:scaleY(1);transform:scaleY(1)}}@keyframes line-scale{0%,40%,to{-webkit-transform:scaleY(.4);-moz-transform:scaleY(.4);-o-transform:scaleY(.4);transform:scaleY(.4)}20%{-webkit-transform:scaleY(1);-moz-transform:scaleY(1);-o-transform:scaleY(1);transform:scaleY(1)}}.free-share{position:fixed;bottom:0;width:7.5rem;height:auto;background:#bd1d14;padding:.32rem .24rem;box-sizing:border-box;z-index:100}.free-share span{width:7.02rem;height:.9rem;font-size:.4rem;font-weight:500;letter-spacing:.02rem;color:#a41f18;background:linear-gradient(90deg,#fdcc76,#f9e58a);display:-webkit-flex;display:flex;-webkit-justify-content:center;justify-content:center;-webkit-align-items:center;align-items:center;border-radius:.45rem;cursor:pointer;-webkit-user-select:none;user-select:none}.poster-loading{display:none;position:fixed;top:0;left:0;-webkit-transform:translateX(-50%);transform:translateX(-50%);width:7.5rem;height:100%;background:rgba(0,0,0,.6);z-index:199}.poster-loading .loading-content{position:relative;transform:translateY(-50%);width:4.8rem;height:2.8rem;background:#fff;display:-webkit-flex;display:flex;-webkit-justify-content:center;justify-content:center;-webkit-align-items:center;align-items:center;-webkit-flex-direction:column;flex-direction:column;margin:0 auto;border-radius:.1rem}.poster-loading .loading-content img{width:.68rem;height:.68rem;margin-bottom:.36rem;-webkit-animation:turn 1s linear infinite;animation:turn 1s linear infinite}.poster-loading .loading-content span{font-size:.28rem;font-weight:500;color:#666}@-webkit-keyframes turn{0%{-webkit-transform:rotate(0);transform:rotate(0)}to{-webkit-transform:rotate(1turn);transform:rotate(1turn)}}@keyframes turn{0%{-webkit-transform:rotate(0);transform:rotate(0)}to{-webkit-transform:rotate(1turn);transform:rotate(1turn)}}@media screen and (device-width:375px) and (device-height:812px) and (-webkit-device-pixel-radio:3){.free-container{padding-bottom:1.82rem}.free-share{padding-bottom:.6rem}}@media screen and (device-width:414px) and (device-height:896px) and (-webkit-device-pixel-radio:2){.free-container{padding-bottom:1.82rem}.free-share{padding-bottom:.6rem}}@media screen and (device-width:414px) and (device-height:896px) and (-webkit-device-pixel-radio:3){.free-container{padding-bottom:1.82rem}.free-share{padding-bottom:.6rem}}@media screen and (device-width:375px) and (device-height:812px){.free-container{padding-bottom:1.82rem}.free-share{padding-bottom:.6rem}}@media screen and (device-width:414px) and (device-height:896px){.free-container{padding-bottom:1.82rem}.free-share{padding-bottom:.6rem}}</style>
</head>
<body>
    <div id="free_app" class="free-container" v-cloak>
        <div class="free-mail">
            <img src="http://img.bc.fqapps.com/fudai2408855110260caaed5ecf9c9b3b33bf.png" alt="" class="free-banner">
            <img src="http://img.bc.fqapps.com/fudai83297190af6ff1553ef3695aa66d8aea.png" alt="" class="free-explain">
            
            <div class="free-navbar">
                <div class="free-navbar-class">
                    <span v-for="item in oNavbar.list" :class="{'active': item.value == oNavbar.selected}" @click="handleNavbar(item)">
                        {{ item.name }}
                    </span>
                </div>
                <div class="free-navbar-second">
                    <span v-for="item in oNavbar.secondList" :class="{'active': item.value == oNavbar.secondSelected}" @click="handleSecondNavbar(item)">
                        {{ item.name }}
                    </span>
                </div>
                <p class="free-navbar-tips">每个专区可任意选择1个商品下单，仅限1天</p>
            </div>

            <div class="free-lists">
                <template v-if="!oData.loading">
                    <div class="free-item" v-for="item in oData.list">
                        <img v-lazy="item.itempic" v-if="item.itempic">
                        <img src="http://img.bc.fqapps.com/fudai13cae4ae6ef16739ed3b100a2ec39e97.gif" alt="" v-else>
                        <div class="detail">
                            <p class="title">{{ item.itemtitle }}</p>
                            <span class="label">礼金￥{{ item.coupon_amount }}</span>
                            <span class="share" :id="'item' + item.sku" @click="handleGoodsTransfer(item, 'share')">分享</span>
                            <div class="footer">
                                <div class="price">
                                    <span>￥{{ item.itemprice }}</span>
                                    <em>￥{{ item.activityprice }}</em>
                                </div>
                                <span class="operation" @click="handleGoodsTransfer(item, 'shop')">立即购买</span>
                            </div>
                        </div>
                    </div>

                    <!-- 底部提示 -->
                    <!-- <div class="free-item-loading">
                        <span v-if="oData.endShowTips">已经加载到底啦~</span>
                        <span v-else>数据正在赶来的路上...</span>
                    </div> -->
                </template>

                <!-- 加载效果 -->
                <div class="free-loading" v-if="oData.loading">
                    <div style="color: #FFFFFF" class="la-line-scale">
                        <div></div>
                        <div></div>
                        <div></div>
                        <div></div>
                        <div></div>
                    </div>
                    <p>数据加载中...</p>
                </div>
            </div>

            <div class="free-share">
                <span id="share_href" @click="handleShare">分享给好友</span>
            </div>
        </div>
    </div>

    <script src="https://cdn.staticfile.org/jquery/2.2.4/jquery.min.js"></script>
    <script src="https://cdn.staticfile.org/vue/2.6.10/vue.min.js"></script>
    <script src="https://cdn.staticfile.org/vue-lazyload/1.3.3/vue-lazyload.js"></script>
    <script src="https://cdn.staticfile.org/layer/2.3/layer.js"></script>
    <script src="https://cdn.staticfile.org/clipboard.js/2.0.4/clipboard.min.js"></script>
    <script>
        var vmUrlSearchs = null
        function vmRequest(name) {
            if (!vmUrlSearchs) {
                vmUrlSearchs = new vmUrlSearch()
            }
            return vmUrlSearchs[name]
        }

        function vmUrlSearch() {
            var name, value
            var str = location.href
            var num = str.indexOf('?')
            str = str.substr(num + 1)
            var arr = str.split('&')
            for (var i = 0; i < arr.length; i++) {
                num = arr[i].indexOf('=')
                if (num > 0) {
                    name = arr[i].substring(0, num)
                    value = arr[i].substr(num + 1)
                    this[name] = value
                }
            }
        }

        Vue.use(VueLazyload, {
            preLoad: 1.3,
            error: 'http://img.bc.haodanku.com/haodanku/1595237918',
            loading: 'http://img.bc.fqapps.com/fudai13cae4ae6ef16739ed3b100a2ec39e97.gif',
            attempt: 1
        });

        var vmJdFree = new Vue({
            el: '#free_app',
            data: {
                vmCid: vmRequest("cid"),
                hostLink: window.location,
                vmHttp: window.location.protocol.substring(0, window.location.protocol.length - 1),
                oNavbar: {
                    list: [
                        {
                            name: '5元礼金专区',
                            value: 5
                        },
                        {
                            name: '3元礼金专区',
                            value: 3
                        }
                    ],
                    selected: 5,

                    secondList: [
                        {
                            name: '1区',
                            value: 1
                        },
                        {
                            name: '2区',
                            value: 2
                        },
                        {
                            name: '3区',
                            value: 3
                        },
                        {
                            name: '4区',
                            value: 4
                        }
                    ],
                    secondSelected: 1
                },

                oBasic: {
                    page: 1,
                    page_total: 1,

                    share_href: ''
                },

                oData: {
                    list: [],
                    loading: true,
                    ajaxSwtich: true,
                    endShowTips: false
                }
            },
            created: function () {
                this.oBasic.share_href = this.hostLink.href;
                this.getJdGoods();
            },
            methods: {
                /**
                 * 切换导航栏
                 */
                handleNavbar: function (item) {
                    if (this.oNavbar.selected == item.value) return false;
                    if (!this.oData.ajaxSwtich) return false;

                    this.oNavbar.selected = item.value;
                    this.oNavbar.secondSelected = 1;
                    this.oData.list = [];
                    this.oData.loading = true;
                    this.oData.ajaxSwtich = false;
                    this.getJdGoods();
                },

                /**
                 * 切换二级导航栏
                 */
                handleSecondNavbar: function (item) {
                    if (this.oNavbar.secondSelected == item.value) return false;
                    if (!this.oData.ajaxSwtich) return false;

                    this.oNavbar.secondSelected = item.value;
                    this.oData.list = [];
                    this.oData.loading = true;
                    this.oData.ajaxSwtich = false;
                    this.getJdGoods();
                },

                /**
                 * 获取商品数据
                 */
                getJdGoods: function () {
                    var that = this;

                    $.ajax({
                        url: 'https://api.haodanku.com/activity/get_jd_items',
                        type: 'GET',
                        data: {
                            amount: this.oNavbar.selected,
                            nav: this.oNavbar.secondSelected
                        },
                        dataType: 'json'
                    }).done(function (res) {
                        if (res.code == 200) {
                            that.oData.list = res.data.list;
                            that.oData.ajaxSwtich = true;

                            setTimeout(function () {
                                that.oData.loading = false;
                            }, 200);
                        } else {
                            that.getJdGoods()
                        }
                    })
                },

                /**
                 * 商品转链
                 */
                handleGoodsTransfer: function (item, source) {
                    var that = this;

                    $.ajax({
                        url: "https://www.gomyorder.cn/api/get_jdresult_url",
                        type: 'POST',
                        data: {
                            apikey: 'maxd',  //必填
                            code: '2231278816',   //必填
                            nav: this.oNavbar.secondSelected,
                            type: this.oNavbar.selected,
                            item_url: item.itemlink
                        },
                        dataType: 'json',
                        async: false
                    }).done(function (res) {
                        if (res.code == 200) {
                            if (source == 'shop') {
                                // 购买
                                window.location.href = res.data.short_url;
                            } else if (source == 'share') {
                                // 分享    
                                $('#item' + item.sku).attr('data-word', item.itemtitle + '\n' + res.data.short_url);
                            }
                        } else {
                            layer.msg(res.msg, {
                                time: 1200,
                                shift: 5
                            })
                            return
                        }
                    });

                    var clipboard = new ClipboardJS('#item' + item.sku, {
                        text: function () {
                            return $('#item' + item.sku).attr('data-word');
                        }
                    });

                    clipboard.on('success', function (e) {
                        layer.msg('复制成功，分享给身边好友吧~', {
                            time: 1200,
                            shift: 5
                        });
                    });

                    clipboard.on('error', function (e) {
                        layer.msg('复制失败，请稍后重试', {
                            time: 1200,
                            shift: 5
                        })
                    })
                },

                /**
                 * 分享给好友
                */
                handleShare: function () {
                    var that = this;

                    var clipboard = new ClipboardJS('#share_href', {
                        text: function () {
                            return '我发现了一个京东羊毛，每天都可以一元购，不信点开看看～' + that.oBasic.share_href
                        }
                    });

                    clipboard.on('success', function (e) {
                        layer.msg('复制成功，分享给身边好友吧~', {
                            time: 1200,
                            shift: 5
                        });
                    });

                    clipboard.on('error', function (e) {
                        layer.msg('复制失败，请稍后重试', {
                            time: 1200,
                            shift: 5
                        })
                    })
                }
            }
        })
    </script>
</body>
</html>